<template>
  <div class="box">
    <img src="@/assets/images/data-banner.png" width="100%" alt="" />
    <div class="main">
      <div class="data-card">
        <div class="f24 f aic pb10">
          <img src="@/assets/images/education.png" width="40" alt="" />
          学历要求({{ new Date().getFullYear() }}年)
        </div>
        <ECharts :options="chartOptions" />
      </div>
      <div class="data-card mt20">
        <div class="f24 f aic pb10">
          <img src="@/assets/images/position.png" width="35" alt="" />
          各省职位数据({{ new Date().getFullYear() }}年)
        </div>
        <ECharts :options="chartOptions2" />
      </div>
      <div class="data-card mt20">
        <div class="f24 f aic pb30">
          <img src="@/assets/images/position.png" width="35" alt="" />
          招考人数最多职位排行榜({{ new Date().getFullYear() }}年)
        </div>
        <div class="table-box1">
          <el-table
            :data="recruitCount"
            stripe
            header-row-class-name="header-bg"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            />
            <el-table-column
              prop="area"
              label="地区"
              width="100"
              align="center"
            />
            <el-table-column prop="deptName" label="部门名称" align="center" />
            <el-table-column prop="employer" label="用人司局" align="center" />
            <el-table-column
              prop="position"
              label="招考职位名称"
              width="330"
              align="center"
            />
            <el-table-column
              prop="recruitCount"
              label="招考人数"
              align="center"
              width="100"
            />
            <el-table-column
              prop="passCount"
              label="过审人数"
              width="100"
              align="center"
            />
          </el-table>
        </div>
      </div>
      <div class="data-card mt20">
        <div class="f24 f aic pb30">
          <img src="@/assets/images/position.png" width="35" alt="" />
          报名人数最多职位排行榜({{ new Date().getFullYear() }}年)
        </div>
        <div class="table-box2">
          <el-table
            :data="applicantsCount"
            stripe
            header-row-class-name="header-bg2"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            />
            <el-table-column
              prop="area"
              label="地区"
              width="100"
              align="center"
            />
            <el-table-column prop="deptName" label="部门名称" align="center" />
            <el-table-column prop="employer" label="用人司局" align="center" />
            <el-table-column
              prop="position"
              label="招考职位名称"
              align="center"
              width="330"
            />
            <el-table-column
              prop="recruitCount"
              label="招考人数"
              width="100"
              align="center"
            />
            <el-table-column
              prop="applicantsCount"
              label="报名人数"
              width="100"
              align="center"
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ECharts from "@/components/eCharts/index.vue";
import * as echarts from "echarts";
import ScrollTable from "@/components/ScrollTable/index.vue";

const chartOptions = ref({});
const chartOptions2 = ref({});

const recruitCount = ref([
  {
    area: "四川",
    deptName: "成都铁路公安局",
    employer: "成都铁路公安局",
    position: "成都铁路公安处基层所队民警",
    recruitCount: 114,
    passCount: 3973,
  },
  {
    area: "黑龙江",
    deptName: "哈尔滨铁路公安局",
    employer: "哈尔滨铁路公安局",
    position: "牡丹江铁路公安处基层所队民警",
    recruitCount: 87,
    passCount: 2181,
  },
  {
    area: "广东",
    deptName: "广州铁路公安局",
    employer: "广州铁路公安局",
    position: "广州铁路公安处基层所队民警",
    recruitCount: 78,
    passCount: 1634,
  },
  {
    area: "贵州",
    deptName: "成都铁路公安局",
    employer: "成都铁路公安局",
    position: "贵阳铁路公安处基层所队民警",
    recruitCount: 75,
    passCount: 2341,
  },
  {
    area: "辽宁",
    deptName: "沈阳铁路公安局",
    employer: "沈阳铁路公安局",
    position: "锦州铁路公安处基层所队民警",
    recruitCount: 71,
    passCount: 990,
  },
  {
    area: "湖南",
    deptName: "广州铁路公安局",
    employer: "广州铁路公安局",
    position: "怀化铁路公安处基层所队民警",
    recruitCount: 70,
    passCount: 2000,
  },
  {
    area: "吉林",
    deptName: "沈阳铁路公安局",
    employer: "沈阳铁路公安局",
    position: "延边铁路公安处基层所队民警",
    recruitCount: 68,
    passCount: 186,
  },
  {
    area: "黑龙江",
    deptName: "哈尔滨铁路公安局",
    employer: "哈尔滨铁路公安局",
    position: "佳木斯铁路公安处基层所队民警",
    recruitCount: 62,
    passCount: 1316,
  },
  {
    area: "湖北",
    deptName: "武汉铁路公安局",
    employer: "武汉铁路公安局",
    position: "武汉铁路公安处基层所队民警",
    recruitCount: 61,
    passCount: 1753,
  },
  {
    area: "北京",
    deptName: "北京铁路公安局",
    employer: "北京铁路公安局",
    position: "北京铁路公安处基层所队民警",
    recruitCount: 57,
    passCount: 1362,
  },
]);

const applicantsCount = ref([
  {
    area: "北京",
    deptName: "中华职业教育社",
    employer: "联络部",
    position: "联络部一级主任科员及以下",
    recruitCount: 1,
    applicantsCount: 15678,
  },
  {
    area: "广西",
    deptName: "广西出入境边防检查总站",
    employer: "广西出入境边防检查总站",
    position: "爱店出入境边防检查站一级警长及以下（二）",
    recruitCount: 2,
    applicantsCount: 4597,
  },
  {
    area: "四川",
    deptName: "成都铁路公安局",
    employer: "成都铁路公安局",
    position: "成都铁路公安处基层所队民警",
    recruitCount: 114,
    applicantsCount: 4554,
  },
  {
    area: "湖南",
    deptName: "广州铁路公安局",
    employer: "广州铁路公安局",
    position: "衡阳铁路公安处基层所队民警",
    recruitCount: 51,
    applicantsCount: 4474,
  },
  {
    area: "北京",
    deptName: "国家知识产权局",
    employer: "商标局",
    position: "审查部门（三）一级主任科员及以下",
    recruitCount: 1,
    applicantsCount: 4400,
  },
  {
    area: "广东",
    deptName: "广州铁路公安局",
    employer: "广州铁路公安局",
    position: "广州铁路公安处基层所队民警",
    recruitCount: 78,
    applicantsCount: 4353,
  },
  {
    area: "甘肃",
    deptName: "兰州铁路公安局",
    employer: "兰州铁路公安局",
    position: "兰州铁路公安处基层所队民警",
    recruitCount: 40,
    applicantsCount: 4295,
  },
  {
    area: "西藏",
    deptName: "西藏出入境边防检查总站",
    employer: "西藏出入境边防检查总站",
    position: "林芝边境管理支队一级警长及以下（十四）",
    recruitCount: 1,
    applicantsCount: 3454,
  },
  {
    area: "河北",
    deptName: "河北出入境边防检查总站",
    employer: "河北出入境边防检查总站",
    position: "石家庄边检站一级警长及以下（二）",
    recruitCount: 1,
    applicantsCount: 3132,
  },
  {
    area: "贵州",
    deptName: "成都铁路公安局",
    employer: "成都铁路公安局",
    position: "贵阳铁路公安处基层所队民警",
    recruitCount: 75,
    applicantsCount: 2916,
  },
]);

// 修改后的加载数据方法
function loadData() {
  initChart1();
  initChart2();
}

function initChart1() {
  let color = [
    "#0090FF",
    "#36CE9E",
    "#FFC005",
    "#FF515A",
    "#8B5CFF",
    "#00CA69",
  ];
  let echartData = [
    {
      name: "仅限大专",
      value1: 6,
      value2: 24,
      value3: 0,
    },
    {
      name: "大专或本科",
      value1: 9,
      value2: 20,
      value3: 0,
    },
    {
      name: "大专及以上",
      value1: 6,
      value2: 8,
      value3: 0,
    },
    {
      name: "仅限本科",
      value1: 3252,
      value2: 5213,
      value3: 16,
    },
    {
      name: "本科或硕士研究生",
      value1: 911,
      value2: 1628,
      value3: 4,
    },
    {
      name: "本科及以上",
      value1: 13866,
      value2: 27686,
      value3: 67,
    },
    {
      name: "仅限硕士研究生",
      value1: 565,
      value2: 959,
      value3: 3,
    },
    {
      name: "硕士研究生及以上",
      value1: 2164,
      value2: 4141,
      value3: 10,
    },
    {
      name: "仅限博士研究生",
      value1: 31,
      value2: 42,
      value3: 0,
    },
  ];

  let xAxisData = echartData.map((v) => v.name);
  let yAxisData1 = echartData.map((v) => v.value1);
  let yAxisData2 = echartData.map((v) => v.value2);
  let yAxisData3 = echartData.map((v) => v.value3);
  const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
        "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
  };
  chartOptions.value = {
    color: color,
    legend: {
      right: 50,
      top: 20,
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: 70,
      right: 50,
      bottom: 50,
      left: 50,
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#333",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#D9D9D9",
          },
        },
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "数量",
        axisLabel: {
          textStyle: {
            color: "#666",
          },
        },
        nameTextStyle: {
          color: "#666",
          fontSize: 12,
          lineHeight: 40,
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#E9E9E9",
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "报考职位人数",
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[0],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[0], 0.5),
            shadowOffsetY: 8,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[0], 0.3),
                },
                {
                  offset: 1,
                  color: hexToRgba(color[0], 0.1),
                },
              ],
              false
            ),
            shadowColor: hexToRgba(color[0], 0.1),
            shadowBlur: 10,
          },
        },
        data: yAxisData1,
      },
      {
        name: "招考人数",
        type: "line",
        smooth: true,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[1],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[1], 0.5),
            shadowOffsetY: 8,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[1], 0.3),
                },
                {
                  offset: 1,
                  color: hexToRgba(color[1], 0.1),
                },
              ],
              false
            ),
            shadowColor: hexToRgba(color[1], 0.1),
            shadowBlur: 10,
          },
        },
        data: yAxisData2,
      },
      {
        name: "学历占比",
        type: "line",
        smooth: true,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[2],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[2], 0.5),
            shadowOffsetY: 8,
          },
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + "%"; // 提示框显示百分比
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[2], 0.3),
                },
                {
                  offset: 1,
                  color: hexToRgba(color[2], 0.1),
                },
              ],
              false
            ),
            shadowColor: hexToRgba(color[2], 0.1),
            shadowBlur: 10,
          },
        },
        data: yAxisData3,
      },
    ],
  };
}
function initChart2() {
  //职称结构取数
  var pieName = [
    "本科可报考职位数",
    "大专可报考职位数",
    "博士研究生可报考职位数",
    "硕士研究生可报考职位数",
  ];
  var pieNameData = [17118, 21, 3640, 2195];
  var syjgdata = [];
  for (var i = 0; i < pieName.length; i++) {
    syjgdata.push({
      name: pieName[i],
      value: pieNameData[i],
    });
  }
  var rich = {
    name: {
      color: "#666666",
      fontSize: 14,
      padding: [0, 30, 5, 30],
      fontWeight: "400",
      align: "left",
    },
    value: {
      color: "#333",
      fontSize: 15,
      padding: [8, 30, 0, 30],
      fontWeight: "500",
      align: "left",
    },
    percent: {
      color: "#FFF",
      align: "right",
      fontSize: 15,
      fontWeight: "500",
    },
    hr: {
      borderColor: "#DFDFDF",
      width: "100%",
      borderWidth: 1,
      height: 0,
    },
    cir: {
      fontSize: 20,
    },
  };

  // 颜色列表
  var colorList = ["#507AFF", "#51D9A2", "#FFC371", "#797AFF"];

  // ECharts 4.0+ 版本配置
  chartOptions2.value = {
    series: [
      {
        type: "pie",
        radius: ["0%", "50%"],
        center: ["50%", "50%"],
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
        label: {
          position: "inner",
          formatter: function (params) {
            return "{percent|" + params.percent.toFixed(0) + "%}";
          },
          rich: rich,
        },
        data: syjgdata,
      },
      {
        type: "pie",
        silent: true, //取消高亮
        radius: ["0%", "50%"],
        center: ["50%", "50%"],
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
        labelLine: {
          length: 30,
          length2: 0,
          lineStyle: {
            color: "transparent",
          },
        },
        label: {
          formatter: function (params) {
            return (
              "{name|" + params.name + "}\n{hr|}\n{value|" + params.value + "}"
            );
          },
          rich: rich,
          padding: [2, 25, 0, 25],
        },
        data: syjgdata,
        z: -1,
      },
      {
        type: "pie",
        silent: true, //取消高亮
        radius: ["0%", "50%"],
        center: ["50%", "50%"],
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
        labelLine: {
          length: 30,
          length2: 0,
          lineStyle: {
            color: "transparent",
          },
        },
        label: {
          formatter: (params) => {
            return "\n{cir|●}\n";
          },
          rich: rich,
          color: "inherit",
        },
        data: syjgdata,
        z: -1,
      },
      {
        type: "pie",
        silent: true, //取消高亮
        radius: ["0%", "57%"],
        center: ["50%", "50%"],
        hoverAnimation: false, //取消动画效果
        itemStyle: {
          color: "#F2F9F7",
        },
        label: {
          show: false,
        },
        data: syjgdata,
        z: -1,
      },
    ],
  };
}

onMounted(() => {
  loadData(); // 初始化加载数据
  //updateHeight();
  // window.addEventListener("resize", updateHeight);
});
</script>

<style lang="scss" scoped>
.box {
  background: #f5f7fa;
  padding-top: 80px;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 0 0 20px;
  .data-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
  }
}
.table-box1,
.table-box2 {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  overflow: hidden;
}
:deep(.header-bg) {
  background: linear-gradient(160deg, #03ccfd 44%, #0b82f5 56%);
  color: #fff;
}
:deep(.header-bg2) {
  background: linear-gradient(160deg, #feb072 44%, #ff6f6f 56%);
  color: #fff;
}
:deep(.el-table__row--striped) {
  background: linear-gradient(160deg, #e5faff 44%, #e6f2fe 56%) !important;
}
.table-box2 :deep(.el-table__row--striped) {
  background: linear-gradient(160deg, #fff7f1 44%, #fff0f0 56%) !important;
}
:deep(.el-table th.el-table__cell) {
  background: none !important;
}
:deep(td.el-table__cell) {
  background: none !important;
}
</style>
